import { Metadata } from 'next';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Progress } from '@/components/ui/progress';
import {
  SolutionsBreadcrumb,
  SolutionsNavigationSimple,
} from '@/components/solutions-navigation';
import { CaseStudies, caseStudiesByIndustry } from '@/components/case-studies';
import {
  TrendingUp,
  Zap,
  Shield,
  BarChart3,
  Clock,
  Database,
  Network,
  Cpu,
} from 'lucide-react';

export const metadata: Metadata = {
  title: '高频交易系统解决方案 | CActor金融科技',
  description:
    'CActor高频交易系统：微秒级延迟，百万TPS，企业级可靠性的交易解决方案',
};

/**
 * 高频交易系统解决方案页面
 * 展示CActor在高频交易领域的完整技术方案
 */
export default function HighFrequencyTradingPage() {
  const performanceMetrics = [
    { label: '平均延迟', value: '< 10μs', progress: 95 },
    { label: '峰值TPS', value: '1.2M', progress: 98 },
    { label: '系统可用性', value: '99.99%', progress: 99 },
    { label: '故障恢复时间', value: '< 100ms', progress: 92 },
  ];

  const architectureComponents = [
    {
      name: '订单路由Actor',
      description: '智能订单路由和分发',
      icon: Network,
      color: 'bg-blue-500',
    },
    {
      name: '市场数据Actor',
      description: '实时市场数据处理',
      icon: BarChart3,
      color: 'bg-green-500',
    },
    {
      name: '风险控制Actor',
      description: '实时风险评估和控制',
      icon: Shield,
      color: 'bg-red-500',
    },
    {
      name: '执行引擎Actor',
      description: '高性能交易执行',
      icon: Zap,
      color: 'bg-yellow-500',
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800">
      {/* Breadcrumb */}
      <div className="max-w-7xl mx-auto px-4 pt-6">
        <SolutionsBreadcrumb />
      </div>

      {/* Hero Section */}
      <section className="relative py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <Badge variant="outline" className="mb-4">
              <TrendingUp className="mr-2 h-4 w-4" />
              高频交易解决方案
            </Badge>
            <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
              超低延迟交易系统
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              基于CActor框架构建的企业级高频交易系统，实现微秒级延迟和百万级TPS，为金融机构提供极致性能的交易解决方案
            </p>
          </div>

          {/* Performance Metrics */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-16">
            {performanceMetrics.map((metric, index) => (
              <Card
                key={index}
                className="text-center bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0"
              >
                <CardHeader className="pb-2">
                  <CardTitle className="text-2xl font-bold text-blue-600">
                    {metric.value}
                  </CardTitle>
                  <CardDescription>{metric.label}</CardDescription>
                </CardHeader>
                <CardContent>
                  <Progress value={metric.progress} className="h-2" />
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Architecture Overview */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">系统架构设计</h2>
            <p className="text-lg text-muted-foreground">
              基于CActor的7层架构，实现高性能、高可靠性的交易系统
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {architectureComponents.map((component, index) => {
              const IconComponent = component.icon;
              return (
                <Card
                  key={index}
                  className="group hover:shadow-lg transition-all duration-300 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0"
                >
                  <CardHeader className="text-center">
                    <div
                      className={`mx-auto p-4 rounded-full ${component.color} text-white mb-4 w-16 h-16 flex items-center justify-center`}
                    >
                      <IconComponent className="h-8 w-8" />
                    </div>
                    <CardTitle className="text-lg">{component.name}</CardTitle>
                    <CardDescription>{component.description}</CardDescription>
                  </CardHeader>
                </Card>
              );
            })}
          </div>

          {/* Architecture Diagram */}
          <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Cpu className="h-5 w-5" />
                交易系统架构图
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-slate-700 dark:to-slate-600 p-8 rounded-lg">
                <div className="text-center text-sm text-muted-foreground mb-4">
                  [交互式架构图 - 展示Actor间的消息流和数据流]
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
                  <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm">
                    <div className="font-semibold mb-2">数据层</div>
                    <div className="text-sm text-muted-foreground">
                      市场数据接收 → 数据清洗 → 实时分发
                    </div>
                  </div>
                  <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm">
                    <div className="font-semibold mb-2">业务层</div>
                    <div className="text-sm text-muted-foreground">
                      订单处理 → 风险控制 → 交易执行
                    </div>
                  </div>
                  <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm">
                    <div className="font-semibold mb-2">监控层</div>
                    <div className="text-sm text-muted-foreground">
                      性能监控 → 告警系统 → 运维管理
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Technical Details */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <Tabs defaultValue="implementation" className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="implementation">实现方案</TabsTrigger>
              <TabsTrigger value="performance">性能优化</TabsTrigger>
              <TabsTrigger value="monitoring">监控告警</TabsTrigger>
              <TabsTrigger value="deployment">部署指南</TabsTrigger>
            </TabsList>

            <TabsContent value="implementation" className="mt-6">
              <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                <CardHeader>
                  <CardTitle>核心Actor实现</CardTitle>
                  <CardDescription>
                    高频交易系统的核心Actor组件实现
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="bg-slate-900 text-green-400 p-6 rounded-lg font-mono text-sm overflow-x-auto">
                    <pre>{`// 订单处理Actor实现
class OrderProcessorActor extends CActor {
  constructor() {
    super()
    this.orderBook = new OrderBook()
    this.riskManager = new RiskManager()
  }

  // 处理新订单消息
  async handleNewOrder(order: Order): Promise<OrderResult> {
    // 1. 风险检查
    const riskResult = await this.riskManager.checkRisk(order)
    if (!riskResult.passed) {
      return { status: 'REJECTED', reason: riskResult.reason }
    }

    // 2. 订单匹配
    const matchResult = await this.orderBook.match(order)
    
    // 3. 发送执行指令
    if (matchResult.matched) {
      await this.send('execution-engine', {
        type: 'EXECUTE_TRADE',
        trade: matchResult.trade
      })
    }

    return { status: 'ACCEPTED', orderId: order.id }
  }

  // 处理市场数据更新
  async handleMarketData(data: MarketData): Promise<void> {
    this.orderBook.updateMarketData(data)
    
    // 触发重新匹配
    await this.triggerMatching()
  }
}`}</pre>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="performance" className="mt-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Clock className="h-5 w-5" />
                      延迟优化
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3 text-sm">
                      <li className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          内存
                        </Badge>
                        零拷贝消息传递机制
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          网络
                        </Badge>
                        RDMA高速网络通信
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          CPU
                        </Badge>
                        CPU亲和性绑定优化
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          算法
                        </Badge>
                        无锁数据结构设计
                      </li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <BarChart3 className="h-5 w-5" />
                      吞吐量优化
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3 text-sm">
                      <li className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          并发
                        </Badge>
                        Actor并行处理模式
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          批处理
                        </Badge>
                        智能批量订单处理
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          缓存
                        </Badge>
                        多级缓存策略
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          分片
                        </Badge>
                        动态负载均衡
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            <TabsContent value="monitoring" className="mt-6">
              <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                <CardHeader>
                  <CardTitle>实时监控系统</CardTitle>
                  <CardDescription>全方位的系统监控和告警机制</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="text-center">
                      <div className="bg-blue-100 dark:bg-blue-900 p-4 rounded-lg mb-4">
                        <Database className="h-8 w-8 mx-auto text-blue-600" />
                      </div>
                      <h4 className="font-semibold mb-2">性能指标</h4>
                      <p className="text-sm text-muted-foreground">
                        延迟、吞吐量、CPU使用率实时监控
                      </p>
                    </div>
                    <div className="text-center">
                      <div className="bg-green-100 dark:bg-green-900 p-4 rounded-lg mb-4">
                        <Shield className="h-8 w-8 mx-auto text-green-600" />
                      </div>
                      <h4 className="font-semibold mb-2">风险监控</h4>
                      <p className="text-sm text-muted-foreground">
                        交易风险、系统风险实时评估
                      </p>
                    </div>
                    <div className="text-center">
                      <div className="bg-red-100 dark:bg-red-900 p-4 rounded-lg mb-4">
                        <Zap className="h-8 w-8 mx-auto text-red-600" />
                      </div>
                      <h4 className="font-semibold mb-2">告警系统</h4>
                      <p className="text-sm text-muted-foreground">
                        智能告警、自动故障恢复
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="deployment" className="mt-6">
              <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                <CardHeader>
                  <CardTitle>部署最佳实践</CardTitle>
                  <CardDescription>生产环境部署指南和配置建议</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    <div>
                      <h4 className="font-semibold mb-3">硬件配置建议</h4>
                      <div className="bg-slate-100 dark:bg-slate-700 p-4 rounded-lg">
                        <ul className="space-y-2 text-sm">
                          <li>• CPU: Intel Xeon Gold 6248R (24核心) 或更高</li>
                          <li>• 内存: 128GB DDR4-3200 ECC</li>
                          <li>• 网络: 25Gbps+ RDMA网卡</li>
                          <li>• 存储: NVMe SSD RAID配置</li>
                        </ul>
                      </div>
                    </div>
                    <div>
                      <h4 className="font-semibold mb-3">系统配置优化</h4>
                      <div className="bg-slate-100 dark:bg-slate-700 p-4 rounded-lg">
                        <ul className="space-y-2 text-sm">
                          <li>• 内核参数调优 (isolcpus, rcu_nocbs)</li>
                          <li>• 网络栈优化 (DPDK, SR-IOV)</li>
                          <li>• 内存大页配置 (Hugepages)</li>
                          <li>• 实时调度策略 (SCHED_FIFO)</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </section>

      {/* Customer Case Studies */}
      <div className="bg-white/50 dark:bg-slate-800/50">
        <CaseStudies
          studies={caseStudiesByIndustry['high-frequency-trading']}
          title="客户成功案例"
          description="真实的高频交易系统部署案例和业务价值"
        />
      </div>

      {/* CTA Section */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">
            准备构建您的高频交易系统？
          </h2>
          <p className="text-lg text-muted-foreground mb-8">
            联系我们的技术专家，获取定制化的高频交易解决方案
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-blue-600 hover:bg-blue-700">
              获取技术方案
            </Button>
            <Button size="lg" variant="outline">
              预约演示
            </Button>
          </div>
        </div>
      </section>

      {/* Solutions Navigation */}
      <div className="max-w-7xl mx-auto px-4">
        <SolutionsNavigationSimple />
      </div>
    </div>
  );
}
